<template>
	<view>
		<uni-nav-bar title="发布广告" left-icon="back" :border="false" background-color="transparent" right-text="记录"
			@clickLeft="$tab.back()" @clickRight="goRecord" :fixed="true" :statusBar="true" color="#FFF"></uni-nav-bar>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/list_xiaofeizhuanqu.png" class="image-1" mode=""></image>

		<view class="px-20">
			<view class="">
				<view class="py-28">
					<input type="text" v-model="form.title" placeholder="输入广告标题">
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>

			<u--textarea class="mt-16" v-model="form.detail" placeholder="请输入广告内容~" count
				confirmType="done"></u--textarea>

			<view class="mt-24">
				<u-line color="#d1d1d1"></u-line>
			</view>

			<view class="">
				<view class="py-28 flex align-center justify-between">
					<view class="flex align-center" style="width: 300rpx;">
						<view class="text-28 font-700 ml-16">
							广告展示类型
						</view>
					</view>
					<view class="flex align-center">
						<u-radio-group v-model="form.adType">
							<u-radio  activeColor="#FA2821" :customStyle="{marginRight: '16px'}" v-for="(item, index) in adRadioList"
								:key="index" :label="item.label" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>

			<htz-image-upload :max="3" v-model="uploadData" @uploadSuccess="uploadEnd" :action="action" mediaType="all"
				:headers="headers">
			</htz-image-upload>


			<view class="text-20 ml-16" style="color:#F56C6C;">提示:比例最好为1:1</view>
			<view class="mt-24">
				<u-line color="#d1d1d1"></u-line>
			</view>
			<view class="" @click="getLatlon">
				<view class="py-28 flex align-center justify-between">
					<view class="flex align-center" style="width: 300rpx;">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_ip.png" mode="" class="image-48">
						</image>
						<view class="text-28 font-700 ml-16">
							商家地址
						</view>
					</view>
					<view class="flex align-center">
						<input type="text" class="text-r" placeholder="请选择详细位置" disabled :value="form.address">
						<u-icon name="arrow-right" color="#A4A4A4"></u-icon>
					</view>
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>
			<view class="" @click="rangeShow = true">
				<view class="py-28 flex align-center justify-between">
					<view class="flex align-center" style="width: 300rpx;">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_fanwei.png" mode="" class="image-48">
						</image>
						<view class="text-28 font-700 ml-16">
							投放范围
						</view>
					</view>
					<view class="flex align-center">
						<input type="text" class="text-r" placeholder="请选择投放范围" disabled :value="rangeText">
						<u-icon name="arrow-right" color="#A4A4A4"></u-icon>
					</view>
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>
			<view class="" @click="comboShow = true">
				<view class="py-28 flex align-center justify-between">
					<view class="flex align-center" style="width: 300rpx;">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_play.png" mode="" class="image-48">
						</image>
						<view class="text-28 font-700 ml-16">
							播放次数
						</view>
					</view>
					<view class="flex align-center">
						<input type="text" class="text-r" placeholder="请选择播放次数" disabled :value="comboText">
						<u-icon name="arrow-right" color="#A4A4A4"></u-icon>
					</view>
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>
			<view class="" @click="commodityShow = true">
				<view class="py-28 flex align-center justify-between">
					<view class="flex align-center" style="width: 300rpx;">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_guanlianshangpin.png" mode=""
							class="image-48"></image>
						<view class="text-28 font-700 ml-16">
							关联商品
						</view>
					</view>
					<view class="flex align-center">
						<input type="text" placeholder="请选择关联商品" disabled class="text-r" :value="commodityText">
						<u-icon name="arrow-right" color="#A4A4A4"></u-icon>
					</view>
				</view>
				<u-line color="#d1d1d1"></u-line>
			</view>

			<view class="mt-24 text-24">
				投放规则：
				<view class="mt-12">
					· 每次投放选择范围后会按照以自己为中心的辐射范围计算。
				</view>
				<view class="mt-12">
					· 提交后需要后台审核通过后方可支付并投放
				</view>
				<view class="mt-12" style="line-height: 1.7;">
					· 广告展示类型为图片则可以上传三张以内图片以轮播图展示，为视频则只会自动播放第一个视频
				</view>
			</view>

			<view class="confirm text-center text-white text-28" @click="confirm">
				确认提交
			</view>
		</view>


		<u-picker :show="rangeShow" :columns="rangeList" keyName="name" @cancel="rangeShow = false"
			@confirm="rangeConFirm"></u-picker>

		<u-picker :show="comboShow" :columns="comboList" keyName="name" @cancel="comboShow = false"
			@confirm="comboConFirm"></u-picker>

		<u-picker :show="commodityShow" :columns="commodityList" keyName="prodName" @cancel="commodityShow = false"
			@confirm="commodityConFirm"></u-picker>

		<u-loading-page :loading="loading" image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	import config from '@/config'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {
		getToken,
		removeToken
	} from '@/utils/auth'
	export default {
		components: {
			htzImageUpload,
		},
		data() {
			return {
				form: {
					title: "",
					address: "",
					detail: "",
					lat: null,
					lon: null,
					rangeId: null,
					resource: "",
					prodId: "",
					packageId: null,
					adType: 0
				},
				uploadData: [],
				adRadioList:[
					{
						name:0,
						label:'图片'
					},
					{
						name:1,
						label:'视频'
					}
				],
				headers: {
					'Authorization': 'Bearer ' + getToken()
				},
				action: config.baseUrl + '/common/upload',

				// 范围
				rangeList: [],
				rangeShow: false,
				rangeText: "",

				// 套餐
				comboList: [],
				comboShow: false,
				comboText: "",

				// 商品
				commodityList: [],
				commodityShow: false,
				commodityText: "",

				loading: false
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async confirm() {
				if (!this.form.title) {
					this.$modal.msg('请填写广告标题!')
					return
				}
				if (!this.form.detail) {
					this.$modal.msg('请填写广告内容!')
					return
				}
				if (this.uploadData.length == 0) {
					this.$modal.msg('请上传图片或视频!')
					return
				}
				if (!this.form.address) {
					this.$modal.msg('请选择详细位置!')
					return
				}
				if (!this.form.rangeId) {
					this.$modal.msg('请选择投放范围!')
					return
				}
				if (!this.form.packageId) {
					this.$modal.msg('请选择播放次数!')
					return
				}

				this.form.resource = this.uploadData.join(',')
				console.log(this.form, 'this.form')

				const res = await this.$Api.advertising.advertaddAd({
					...this.form
				})
				this.$modal.msg('添加成功!')
				console.log(res, '广告新增')
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/advertising/state?state=0`
					})
				}, 1500)
			},
			commodityConFirm(e) {
				const {
					value,
				} = e
				console.log(value, 'value')
				this.commodityText = value[0].prodName
				this.form.prodId = value[0].id
				this.commodityShow = false
			},
			comboConFirm(e) {
				const {
					value,
				} = e
				console.log(value, 'value')
				this.comboText = value[0].name
				this.form.packageId = value[0].id
				this.comboShow = false
			},
			rangeConFirm(e) {
				const {
					value,
				} = e
				console.log(value, 'value')
				this.rangeText = value[0].name
				this.form.rangeId = value[0].id
				this.rangeShow = false
			},
			async getData() {
				this.loading = true
				const res = await this.$Api.advertising.userBackad()
				console.log(res, '用户是否已有上个广告订单')
				this.loading = false
				if (res.data) {
					// 0 是审核中 2 是审核失败
					if (res.data.verifyState == 0 || res.data.verifyState == 2) {
						uni.redirectTo({
							url: `/pages/advertising/state?state=${res.data.verifyState}`
						})
						return
					}

					if (res.data.verifyState == 1 && res.data.state == 0) {
						uni.redirectTo({
							url: '/pages/advertising/order'
						})
						return
					}
				}

				const range = await this.$Api.common.typeChildrenAll('scope')
				console.log(range, '内设范围')
				this.rangeList = [range.data]

				const combo = await this.$Api.common.typeChildrenAll('onethousand')
				console.log(range, '内设套餐')
				this.comboList = [combo.data]

				const shop = await this.$Api.advertising.storesProd()
				console.log(shop, '商家关联商品')
				this.commodityList = [shop.data]
			},
			getLatlon() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.form.address = res.name + res.address
						this.form.lat = res.latitude
						this.form.lon = res.longitude
					}
				});
			},
			goRecord() {
				this.$tab.nav(`/pages/advertising/record`)
			},
			uploadEnd(res) {
				var _res = JSON.parse(res.data);
				console.log(_res, '上传')
				if (_res.code == 200) {
					this.uploadData.push(_res.url);
				}
				if (_res.code === 401) {
					uni.showModal({
						title: "提示",
						content: "登录状态已过期，需要重新登录！",
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login'
								})
								removeToken()
							}
						}
					})
				}
			},
		}
	}
</script>

<style>
	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	/deep/ .u-border {
		border: none !important;
	}

	/deep/.uni-navbar__header-btns-right {
		font-weight: 800;
		font-size: 32rpx !important;
	}

	.image-1 {
		width: 100%;
		height: 176rpx;
	}

	.confirm {
		width: 372rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #FFB23A 0%, #FF5617 100%);
		border-radius: 252rpx 252rpx 252rpx 252rpx;
		margin: 94rpx auto 0;
		line-height: 80rpx;
	}
</style>